<template>
  <div class="main-box">
    <div class="main">
      <div class="middle">
        <div class="left">
          <el-map
            ref="map"
            :loading.sync="mapLoading"
            v-loading="allLoading"
            element-loading-background="rgba(0, 0, 0, 0)"
          ></el-map>
        </div>
        <div class="right">
          <p class="refresh">数据每隔五分钟自动刷新<button class="btn1" @click="refresh"><i class="iconfont">&#xe667;</i>刷新</button></p>
          <ul class="ranking">
            <li>
              <h3 class="title"><em></em>以出勤记录情况排名</h3>
              <div
                class="content"
                v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0)"
              >
                <bar
                  :settings="allAttendDetail"
                  v-if="allAttendDetail.data.findIndex(v => v !== 0) !== -1"
                ></bar>
                <no-data v-else :item="'出勤'" :bg="true" />
              </div>
            </li>
            <li>
              <h3 class="title"><em></em>以体温报警人数排名</h3>
              <div
                class="content"
                v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0)"
              >
                <bar
                  :settings="allTempDetail"
                  v-if="allTempDetail.data.findIndex(v => v !== 0) !== -1"
                ></bar>
                <no-data v-else :item="'体温'" :bg="true" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="line"></div>
      <div class="bottom">
        <ul class="statistics">
          <li class="warn-box">
            <div class="title-box">
              <h3 class="title">
                <em></em>
                今日出勤统计
                <i class="percent">请假预警值{{attendWarnPercent}}%</i>
              </h3>
              <el-message :value="attendWarnPercent" :item="'请假'" @getMessage="getMessage(arguments, 'attend')"></el-message>
            </div>
            <div class="content">
              <p class="warn" v-if="attendWarnTip.attend.show">
                <i style="margin-left:25px" class="iconfont">&#xe641;</i>
                请假预警，超警戒值{{attendWarnTip.attend.value}}%
              </p>
              <matts
                :data="attendOverviewDetail"
              ></matts>
            </div>
          </li>
          <li class="warn-box">
            <div class="title-box">
              <h3 class="title">
                <em></em>
                今日晨检统计
                <i class="percent">疾病预警值{{sickWarnPercent}}%</i>
              </h3>
              <el-message :value="sickWarnPercent" :item="'体温'" @getMessage="getMessage(arguments, 'sick')"></el-message>
            </div>
            <div class="content">
              <p class="warn" v-if="attendWarnTip.sick.show">
                <i style="margin-left:17px" class="iconfont">&#xe641;</i>
                疾病预警，超警戒值{{attendWarnTip.sick.value}}%
              </p>
              <ul class="echarts-box" v-if="tempOverviewDetail.data.findIndex(v => v !== 0) !== -1">
                <li>
                  <bar
                    :settings="tempOverviewDetail"
                  ></bar>
                </li>
                <li>
                  <bar
                    :settings="snackOverviewDetail"
                  ></bar>
                </li>
              </ul>
              <no-data v-else :item="'晨检统计'" />
            </div>
          </li>
          <li>
            <h3 class="title"><em></em>幼儿园信息</h3>
            <div class="content">
              <matts
                :data="gardenOverview"
              ></matts>
            </div>
          </li>
          <li>
            <h3 class="title"><em></em>教师信息</h3>
            <ul class="content">
              <li>
                <pie
                  :data="jobData.data"
                  :color="jobData.color"
                  :title="jobData.title"
                  :pieSize="jobData.pieSize"
                  v-if="jobData.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'职称'" />
              </li>
              <li>
                <pie
                  :data="ageData.data"
                  :color="ageData.color"
                  :title="ageData.title"
                  :pieSize="ageData.pieSize"
                  v-if="ageData.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'年龄'" />
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import ElMap from '@/common/echarts/Map'
import Live from '@/common/ezviz/Live'
import Bar from '@/common/echarts/Bar'
import Matts from './components/Matts'
import Pie from '@/common/echarts/Pie'
import ElMessage from '@/common/elementUi/ElMessage'
import Mixin from '@/pages/virtual/mixin'
export default {
  name: 'HealthyToday',
  components: {
    ElMap,
    Bar,
    Matts,
    Pie,
    Live,
    ElMessage
  },
  mixins: [Mixin],
  data () {
    return {
      mapLoading: true
    }
  },
  computed: {
    allLoading () {
      return this.loading || this.mapLoading
    },
    ...mapState([
      'warnPercent'
    ]),
    ...mapGetters({
      attendWarnTip: 'attendWarnTip',
      attendOverviewDetail: 'attendOverviewDetail',
      tempOverviewDetail: 'tempOverviewDetail',
      snackOverviewDetail: 'snackOverviewDetail',
      allAttendDetail: 'allAttendDetail',
      allTempDetail: 'allTempDetail',
      attendWarnPercent: 'attendWarnPercent',
      sickWarnPercent: 'sickWarnPercent'
    })
  },
  watch: {
    allLoading (val) {
      this.toggleLoading(val)
    }
  },
  methods: {
    // 修改报警
    getMessage (data, name) {
      const [percent] = data
      const { warnPercent } = this.$store.state
      warnPercent[name] = percent / 100
      this.$store.commit('setWarnPercent', warnPercent)
      this.$store.commit('persistWarn')
    },
    // 刷新
    async refresh () {
      this.loading = true
      await this.$store.dispatch('fetchAttendOverview')
      await this.$store.dispatch('fetchAttend')
      this.loading = false
    }
  },
  async mounted () {
    this.$store.commit('setMapTag', '健康安全')

    await this.$store.dispatch('fetchAreaIdList')
    await this.$store.dispatch('fetchGeneralOverview')
    await this.refresh()
  }
}
</script>

<style lang="stylus" scoped>

</style>
